<template>
  <div class="box">
    <div class="left">
      <div class="left_groid">
        <div class="left_left_top">
          <span style="display: inline-block; margin-left: 20px">环境管理</span>
        </div>
        <div class="groid">
            <!-- 左上 -->
            <Lefttop></Lefttop>
        </div>
      </div>

      <div class="left_groid">
        <div class="left_left_button" style="line-height: 30px">
          <span
            style="display: inline-block; margin-left: 20px; color: aliceblue"
            >环境管理</span
          >
        </div>
        <div class="groid">
          <ECharts></ECharts>
        </div>
      </div>
    </div>

    <div class="context">
      <!-- 3D旋转 -->
      <SD></SD>
    </div>

    <div class="right">
      <div class="right_proid">
        <div class="right_proid_top"style="color: aliceblue; line-height: 33px">
          <span style="margin-left: 10%">水电用量</span>
        </div>
        <div class="proid">
          <span
            style="
              display: inline-block;
              width: 40%;
              height: 15%;
              border: solid 1px #ccc;
              margin-left: 7%;
              line-height: 20px;
            "
          >
            <img
              src="../../../public/images/shui.png"
              alt=""
              style="
                width: 20px;
                height: 20px;
                margin-top: 5%;
                margin-right: 1%;
              "
            /><span style="color: aliceblue; font-size: 13px; margin-top: 5%"
              >总用电量 7265</span
            >
          </span>
          <span
            style="
              display: inline-block;
              width: 40%;
              height: 15%;
              border: solid 1px #ccc;
              margin-left: 7%;
            "
          >
            <img
              src="../../../public/images/用电量 2.png"
              alt=""
              style="
                width: 20px;
                height: 20px;
                margin-top: 5%;
                margin-right: 1%;
              "
            /><span style="color: aliceblue; font-size: 13px; margin-top: 5%"
              >总用电量 7265</span
            >
          </span>
          <div class="right_proid_botton">
            <ECharts1></ECharts1>
          </div>
        </div>
      </div>

      <div class="right_proid">
        <div
          class="right_proid_top"
          style="color: aliceblue; line-height: 33px"
        >
          <span style="margin-left: 10%">校园人员流动情况</span>
        </div>
        <div class="proid">
          <span
            style="
              display: inline-block;
              width: 50%;
              height: 20%;
              border: solid 1px #ccc;
              line-height: 20px;
            "
          >
            <img
              src="../../../public/images/昨日访客 2.png"
              alt=""
              style="
                width: 20px;
                height: 20px;
                margin-top: 5%;
                margin-right: 15%;
                margin-left: 10%;
              "
            /><span style="color: aliceblue; font-size: 13px; margin-top: 5%"
              >咋日外来访客</span
            >
          </span>
          <span
            style="
              display: inline-block;
              width: 50%;
              height: 20%;
              border: solid 1px #ccc;
            "
          >
            <img
              src="../../../public/images/今日访客 2.png"
              alt=""
              style="
                width: 20px;
                height: 20px;
                margin-top: 5%;
                margin-right: 15%;
                margin-left: 10%;
              "
            /><span style="color: aliceblue; font-size: 13px; margin-top: 5%"
              >今日外来访客</span
            >
          </span>
          <div class="right_proid_botton">
            <ECharts2></ECharts2>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ECharts from "@/components/ECharts.vue";
import ECharts1 from "@/components/ECharts1.vue";
import ECharts2 from "@/components/ECharts2.vue";
import SD from '@/components/Zn/SD.vue'; 
import Lefttop from "@/components/Zn/Lefttop.vue";
import  { onMounted } from "vue";

// import { apiECartes1 } from "@/api/server";

// onMounted( async()=>{
//  const res1 = await apiECartes1()
//    console.log(res1,'====12345678');
// })
</script>

<style scoped lang="scss">
.active {
  animation-play-state: paused;
}

.box {
  width: 100%;
  height: 100%;
  //   background: blue;
  display: flex;
  .left {
    position: relative;
    width: 30%;
    height: 100%;
    background: url("../../public/image/Photo／背景／Left.png") no-repeat;
    background-size: 100% 100%;
    z-index: 1;
    .left_groid {
      width: 75%;
      height: 40%;
      // background: rgba(250, 247, 247, 0.2);
      margin-left: 40px;
      margin-top: 50px;
      .groid {
        width: 100%;
        height: 90%;
        background: rgba(250, 247, 247, 0.2);
        margin-top: 10px;
      }
    }
  }
  .right_proid_botton {
    width: 100%;
    height: 80%;
    // border: 1px solid #0f0;
  }
  .context {
    // text-align: center;
    flex: 1;
    // margin-top: 200px;
    color: aliceblue;
    transform: rotateX(30deg);
  }

  .right_proid_top {
    background: url("../../public/images/右.png") no-repeat;
    width: 100%;
    height: 10%;
    // background: red;
    background-size: 100% 100%;
  }
  
  .right {
    width: 30%;
    height: 100%;
    background: url("../../public/image/Photo／背景／Right.png") no-repeat;
    background-size: 100% 100%;
    .right_proid {
      width: 75%;
      height: 38%;
      // background: rgba(250, 247, 247, 0.2);
      margin-left: 70px;
      margin-top: 60px;
      .proid {
        width: 100%;
        height: 100%;
        background: rgba(250, 247, 247, 0.2);
        margin-top: 10px;
      }
    }
  }
}
.left_left_top {
  width: 100%;
  background: url("../../public/image/Photo／left-title.png") no-repeat;
  background-size: 100% 100%;
  height: 10%;
  color: aliceblue;
}
.left_left_button {
  width: 100%;
  background: url("../../public/image/Photo／left-title.png") no-repeat;
  background-size: 100% 100%;
  height: 10%;

  // background: red;
  z-index: 999;
}
</style>